import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:get/get.dart';
import 'package:yp/config/style.dart';
import 'package:yp/pages/mall_app/font_money_sale/logic.dart';
import 'package:yp/pages/mall_app/font_money_sale/state.dart';
import 'package:yp/pages/mall_app/pre_sale/logic.dart';
import 'package:yp/utils/util.dart';
import 'package:yp/widgets/navigation_bar.dart';

import '../../../router.dart';

class FontMoneySalePage extends StatefulWidget {
  FontMoneySalePage({Key key}) : super(key: key);

  @override
  _FontMoneySalePageState createState() => _FontMoneySalePageState();
}

class _FontMoneySalePageState extends State<FontMoneySalePage> {
  bool showRule = false;

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: YPNavigationBar(
        '',
        backgroundColor: EsColors.Primary,
        titleColor: EsColors.TitleSecondary,
        backBtnColor: const Color(0xffffffff),
        onPressed: () => Navigator.of(Get.context).pop(),
      ),
      body: GetBuilder<FontMoneySaleLogic>(
        init: FontMoneySaleLogic(),
        builder: (logic) {
          final FontMoneySaleState state = logic.state;
          return state.goodsList.length > 0
              ? Container(
                  height: size.height,
                  width: size.width,
                  color: const Color(0xfff8f8f8),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        state.configInfo != null && state.configInfo.length > 0
                            // state.configInfo['slide_images'].length > 0
                            ? Container(
                                width: size.width,
                                height: size.width * .4,
                                color: const Color(0xffffffff),
                                child: Swiper(
                                  itemBuilder:
                                      (BuildContext context, int index) {
                                    return CachedNetworkImage(
                                      imageUrl: state.configInfo[index],
                                      errorWidget: (context, url, error) =>
                                          Icon(Icons.error),
                                      fit: BoxFit.fill,
                                    );
                                  },
                                  itemCount: state.configInfo.length,
                                  viewportFraction: 1,
                                  scale: 1,
                                  // pagination: SwiperPagination(),
                                  autoplay: true,
                                ),
                              )
                            : SizedBox(),
                        Container(
                          width: size.width,
                          // color: const Color(0xffffffff),
                          padding: const EdgeInsets.symmetric(
                              horizontal: 15, vertical: 15),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '距预付定金结束还有',
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              logic.state.surplusWidget,
                            ],
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 10),
                          alignment: Alignment.topLeft,
                          child: Wrap(
                            alignment: WrapAlignment.start,
                            children:
                                List.generate(state.goodsList.length, (index) {
                              final sizeWH = (size.width - 45) * .5;
                              return Container(
                                margin: const EdgeInsets.all(10),
                                child: InkWell(
                                  onTap: () {
                                    print('订单详情');
                                    Get.toNamed(RouteConfig.fontMoneySaleDetail,
                                        arguments: {
                                          'activity_id': state.goodsList[index]
                                              ['activity_id'],
                                          'item_num_id': state.goodsList[index]
                                              ['item_num_id'],
                                          'styleNumId':state.goodsList[index]['ec_style_num_id'].toString(),
                                          'cat1Id':state.goodsList[index]['cat_id'].toString(),
                                          'shopId':state.goodsList[index]['shop_num_id'].toString(),
                                        });
                                  },
                                  child: Container(
                                    decoration: BoxDecoration(
                                      color: const Color(0xffffffff),
                                      borderRadius: BorderRadius.circular(4),
                                    ),
                                    width: sizeWH,
                                    padding: const EdgeInsets.all(8.0),
                                    child: Column(children: [
                                      Container(
                                        alignment: Alignment.topCenter,
                                        height: sizeWH - 16,
                                        width: sizeWH - 16,
                                        child: CachedNetworkImage(
                                          imageUrl: state.goodsList[index]
                                              ['image_default_id'],
                                          errorWidget: (context, url, error) =>
                                              Icon(Icons.error),
                                          height: sizeWH - 16,
                                          width: sizeWH - 16,
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                      Container(
                                        alignment: Alignment.centerLeft,
                                        padding: const EdgeInsets.only(
                                            top: 5, bottom: 8),
                                        child: Text(
                                          state.goodsList[index]['item_name'],
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                      Row(
                                        children: [
                                          Container(
                                            padding: const EdgeInsets.only(
                                                left: 3, right: 3, bottom: 1),
                                            decoration: BoxDecoration(
                                              border: Border.all(
                                                  color: state.goodsList[index]['buy']!=true?Color(0xffCCCCCC):EsColors.Primary),
                                              borderRadius:
                                                  BorderRadius.circular(10),
                                            ),
                                            margin: const EdgeInsets.only(
                                                right: 15),
                                            child: Text(
                                              // '定金',
                                              state.goodsList[index]['buy']!=true?'已售空':'预付',
                                              style: TextStyle(
                                                  color: state.goodsList[index]['buy']!=true?Color(0xffCCCCCC):EsColors.Primary,
                                                  fontSize: 12),
                                            ),
                                          ),
                                          Container(
                                            padding: const EdgeInsets.only(
                                                top: 2, left: 5),
                                            child: Text(
                                              '￥${toConstraintLen(state.goodsList[index]['depreciate'], 3)}',
                                              style: TextStyle(
                                                color: EsColors.Primary,
                                                // decoration:
                                                //     TextDecoration.lineThrough,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ]),
                                  ),
                                ),
                              );
                            }),
                            // [
                            //   Container(
                            //     margin: const EdgeInsets.all(10),
                            //     child: InkWell(
                            //       onTap: () {
                            //         print('订单详情');
                            //       },
                            //       child: Container(
                            //         decoration: BoxDecoration(
                            //           color: const Color(0xffffffff),
                            //           borderRadius: BorderRadius.circular(4),
                            //         ),
                            //         width: (size.width - 45) * .5,
                            //         padding: const EdgeInsets.all(8.0),
                            //         child: Column(children: [
                            //           Container(
                            //             alignment: Alignment.topCenter,
                            //             height: (size.width - 45) * .5 - 16,
                            //             width: (size.width - 45) * .5 - 16,
                            //             child: CachedNetworkImage(
                            //               imageUrl: '',
                            //               errorWidget: (context, url, error) =>
                            //                   Icon(Icons.error),
                            //               height: (size.width - 45) * .5 - 16,
                            //               width: (size.width - 45) * .5 - 16,
                            //               fit: BoxFit.fill,
                            //             ),
                            //           ),
                            //           Container(
                            //             alignment: Alignment.centerLeft,
                            //             padding: const EdgeInsets.only(
                            //                 top: 5, bottom: 8),
                            //             child: Text(
                            //               '台式饮水机',
                            //               overflow: TextOverflow.ellipsis,
                            //             ),
                            //           ),
                            //           Row(
                            //             children: [
                            //               Container(
                            //                 padding: const EdgeInsets.only(
                            //                     left: 3, right: 3, bottom: 1),
                            //                 decoration: BoxDecoration(
                            //                   border: Border.all(
                            //                       color: EsColors.Primary),
                            //                   borderRadius:
                            //                       BorderRadius.circular(10),
                            //                 ),
                            //                 margin: const EdgeInsets.only(
                            //                     right: 20),
                            //                 child: Text(
                            //                   '定金',
                            //                   style: TextStyle(
                            //                       color: EsColors.Primary,
                            //                       fontSize: 13),
                            //                 ),
                            //               ),
                            //               Container(
                            //                 padding: const EdgeInsets.only(
                            //                     top: 2, left: 5),
                            //                 child: Text(
                            //                   '￥${toConstraintLen(1658.00, 3)}',
                            //                   style: TextStyle(
                            //                     color: EsColors.Primary,
                            //                     decoration:
                            //                         TextDecoration.lineThrough,
                            //                   ),
                            //                 ),
                            //               ),
                            //             ],
                            //           ),
                            //         ]),
                            //       ),
                            //     ),
                            //   ),
                            // ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 5, bottom: 5),
                          child: Text(
                            '~我是有底线的~',
                            style: TextStyle(
                                color: const Color(0xffdddddd), fontSize: 12),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              : Center(
                  child: Text('暂无数据'),
                );
        },
      ),
    );
  }
}
